<script setup lang="ts">
import { ref, withDefaults, getCurrentInstance, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { get_require_detail } from "../../api/index";
import PopupModal from "@/components/popup/modal.vue";

import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
const props = defineProps<{ id: number }>();
const { onShareAppMessage, onShareTimeline } = useShare(
  `package/require/pages/detail/index?id=${props.id}`
);
onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {});
});
const popupModal = ref<InstanceType<typeof PopupModal>>();

const isExpand = ref(true);
const isExpandShow = ref(true);
const instance: any = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance.proxy);
const geiHeight = (id: string) => {
  query
    .select(id)
    .boundingClientRect((data: any) => {
      if (data.height * 2 > 634) {
        isExpandShow.value = true;
        isExpand.value = false;
      } else {
        isExpand.value = true;
        isExpandShow.value = false;
      }
    })
    .exec();
};
const detail = ref({ emergency_end_time: 0, travel_agency_info: {} });
const getDetail = () => {
  get_require_detail(props.id).then((res) => {
    detail.value = res;
  });
};
const allDate = computed(() => {
  let day = 0;
  let hour = 0;
  let minute = 0;
  const time = detail.value.emergency_end_time;
  day = Math.floor(time / (60 * 60 * 24));
  const rest = time - day * (60 * 60 * 24);
  hour = Math.floor(rest / (60 * 60));
  const rest2 = rest - hour * 60 * 60;
  minute = Math.floor(rest2 / 60);
  return { day, hour, minute };
});
const submit = () => {
  popupModal.value?.show({
    title: "温馨提示",
    content: "请前往带团宝APP进行操作",
    showCancel: false,
    confirmText: "我知道了",
  });
};
const phoneCall = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone, // 电话号码
  });
};
onLoad(() => {
  geiHeight("#content");
  getDetail();
});
</script>

<template>
  <view class="requireDetailWrap">
    <view class="headWrap">
      <view class="headWord">
        <text>{{ detail.type_name }}</text>
        <text>{{ detail.name }}</text>
      </view>
      <view
        class="middle"
        :style="{ margin: detail.is_emergency ? '40rpx 0' : '20rpx 0 0' }"
      >
        <view class="middleLfet">
          <view class="left1">
            <image src="/package/require/static/pack.png" mode="scaleToFill" />
            <text>{{ detail.work_year_name }}</text>
          </view>
          <view class="left2">
            <image src="/package/require/static/hat.png" mode="scaleToFill" />
            <text>{{ detail.education_background_name }}</text>
          </view>
        </view>
        <view class="middleRight">
          <view class="mony2" v-if="detail.salary_type == 3">
            <text>议价</text>
          </view>
          <view class="mony" v-else>
            <text>￥</text>
            <text>{{ detail.salary }}-{{ detail.max_salary }}</text>
            <text v-if="detail.salary_type == 2">/日</text>
          </view>
        </view>
      </view>
      <view class="bottom" v-if="detail.is_emergency">
        <view class="bottomLeft">
          <image
            src="/package/require/static/electronic.png"
            mode="scaleToFill"
          />
          <text>该职位为紧急任务</text>
        </view>
        <view class="bottomRight">
          <text>距结束</text>
          <text>{{ allDate.day }}</text>
          <text>天</text>
          <text>{{ allDate.hour }}</text>
          <text>时</text>
          <text>{{ allDate.minute }}</text>
          <text>分</text>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="itemWrap">
        <view class="title">任务明细</view>
        <view class="item">
          <view class="title1">出行日期：</view>
          <view class="title2"
            >{{ detail.start_date }} - {{ detail.end_date }}</view
          >
        </view>
        <view class="item">
          <view class="title1">出发地：</view>
          <view class="title2">{{ detail.start_area_name }}</view>
        </view>
        <view class="item">
          <view class="title1">目的地：</view>
          <view
            class="title2"
            v-for="item in detail.end_area_arr"
            :key="item.id"
            >{{ item.end_area_name }}</view
          >
        </view>
        <view class="item">
          <view class="title1">接待人数：</view>
          <view class="title2">{{ detail.recept_count }}人</view>
        </view>
        <view class="item">
          <view class="title1">行程路线：</view>
          <view class="title2 title3 autoLine">{{ detail.route }}</view>
        </view>
      </view>
      <view class="itemWrap">
        <view class="title">四步轻松接任务</view>
        <view class="taskWrap">
          <view class="line"></view>
          <view class="taskItem">
            <image src="/package/require/static/step1.png" mode="scaleToFill" />
            <view class="wordWrap">
              <view class="word1">第一步</view>
              <view class="word2">选择任务</view>
            </view>
          </view>
          <view class="taskItem">
            <image src="/package/require/static/step2.png" mode="scaleToFill" />
            <view class="wordWrap">
              <view class="word1">第二步</view>
              <view class="word2">主动联系需求方</view>
            </view>
          </view>
          <view class="taskItem">
            <image src="/package/require/static/step3.png" mode="scaleToFill" />
            <view class="wordWrap">
              <view class="word1">第三步</view>
              <view class="word2">接受任务</view>
            </view>
          </view>
          <view class="taskItem">
            <image src="/package/require/static/step4.png" mode="scaleToFill" />
            <view class="wordWrap">
              <view class="word1">第四步</view>
              <view class="word2">行程结束</view>
            </view>
          </view>
        </view>
      </view>
      <view class="itemWrap">
        <view class="title teacherTitle">带团师资要求</view>
        <view class="teacherWrap">
          <view class="title2">语言要求：</view>
          <view class="teacherTagWrap">
            <view
              class="tag"
              v-for="(item, index) in detail.language_arr"
              :key="index"
              >{{ item }}</view
            >
          </view>
        </view>
        <view class="teacherWrap">
          <view class="title2">资格证书：</view>
          <view class="teacherTagWrap">
            <view
              class="tag"
              v-for="(item, index) in detail.credential_arr"
              :key="index"
              >{{ item }}</view
            >
          </view>
        </view>
        <view class="teacherWrap">
          <view class="title2">擅长领域：</view>
          <view class="teacherTagWrap">
            <view
              class="tag"
              v-for="(item, index) in detail.tag_arr"
              :key="index"
              >{{ item }}</view
            >
          </view>
        </view>
        <view class="teacherWrap" v-if="detail.remark">
          <view class="title2">补充备注：</view>
          <view class="remark"> {{ detail.remark }} </view>
        </view>
      </view>
      <view class="itemWrap">
        <view class="title">任务详情</view>
        <view
          class="taskContent title2 title3"
          id="content"
          :style="{ height: isExpand ? 'fit-content' : '634rpx' }"
        >
          <view class="autoLine">
            {{ detail.desc }}
          </view>
          <view class="shadow" v-if="!isExpand"> </view>
        </view>
        <view class="expand" @click="isExpand = !isExpand" v-if="isExpandShow">
          <text> {{ isExpand ? "收起" : "全部展开" }}</text>
          <image
            :style="{ transform: isExpand ? 'rotate(180deg)' : 'rotate(0deg)' }"
            src="/package/require/static/more.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="itemWrap">
        <view class="title teacherTitle">联系方式</view>
        <view class="phone" @click="phoneCall(detail.phone)">
          {{ detail.phone }}
        </view>
      </view>
      <view class="itemWrap">
        <view class="title">公司信息</view>
        <view class="company">
          <image :src="detail.travel_agency_info.logo" mode="scaleToFill" />
          <view class="companyInfo">
            <view class="name">{{ detail.travel_agency_info.name }}</view>
            <view class="companyTagWrap">
              <view
                class="compenyTag"
                v-for="(item, index) in detail.travel_agency_info
                  .business_tag_arr"
                :key="index"
                >{{ item }}</view
              >
            </view>
            <view class="info">
              <text>{{ detail.travel_agency_info.city_name }}</text>
              <text>|</text>
              <text>{{ detail.travel_agency_info.one_sentence }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="footer">
    <view class="confirm" @click="submit">{{
      ["抢单", "待接单", "已接单", "拒单", "取消", "进行中", "已结束"][
        detail.guide_status
      ]
    }}</view>
  </view>
  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
page {
  padding: 0;
  overflow: scroll;
}
.autoLine {
  white-space: pre-wrap;
}
.requireDetailWrap {
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 20rpx;

  height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
  overflow: scroll;
  .headWrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 30rpx 20rpx;
    .headWord {
      text:nth-child(1) {
        height: 32rpx;
        background: linear-gradient(45deg, #fdecc7, #fed5b2);
        border-radius: 8rpx;
        font-size: 20rpx;
        color: #8e5a1f;
        line-height: 20rpx;
        text-align: center;
        margin-right: 10rpx;
        padding: 0 15rpx;
      }
      text:nth-child(2) {
        font-size: 36rpx;
        font-weight: bold;
        color: #2d2d2d;
        line-height: 50rpx;
      }
    }
    .middle {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .middleLfet {
        display: flex;
        .left1 {
          margin-right: 40rpx;
        }
        image {
          width: 24rpx;
          height: 24rpx;
        }
        text {
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;
          margin-left: 10rpx;
        }
      }
      .middleRight {
        .mony {
          flex-shrink: 0;
          text:nth-child(n + 1) {
            font-size: 24rpx;
            color: #fa6400;
            line-height: 50rpx;
          }
          text:nth-child(2n) {
            font-size: 36rpx;
            color: #fa6400;
            line-height: 50rpx;
            font-weight: 700;
          }
          text:nth-child(2) {
            font-weight: bold;
          }
        }
        .mony2 {
          flex-shrink: 0;
          font-size: 36rpx;
          color: #fa6400;
          line-height: 50rpx;
          font-weight: bold;
        }
      }
    }
    .bottom {
      box-sizing: border-box;
      padding: 0 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 80rpx;
      background: linear-gradient(90deg, #ff4854, #fd9363);
      border-radius: 20rpx;
      .bottomLeft {
        display: flex;
        align-items: center;
        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 20rpx;
        }
        text {
          font-size: 28rpx;

          color: #ffffff;
          line-height: 40rpx;
        }
      }
      .bottomRight {
        display: flex;
        align-items: center;
        height: 38rpx;
        text:nth-child(n + 1) {
          color: #5e0000;
          line-height: 38rpx;
        }
        text:nth-child(2n) {
          width: 38rpx;
          height: 38rpx;
          background: rgba($color: #5e0000, $alpha: 0.15);
          border-radius: 4rpx;
          color: #ffffff;
          line-height: 38rpx;
          font-weight: bold;
        }
        text {
          text-align: center;
          margin-left: 10rpx;
          font-size: 24rpx;
          line-height: 38rpx;
        }
      }
    }
  }
  .content {
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 10rpx 20rpx 30rpx 20rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .itemWrap {
      margin-top: 30rpx;
      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        line-height: 50rpx;
      }
      .title1 {
        font-size: 28rpx;
        font-weight: 700;
        color: #666666;
        line-height: 40rpx;
      }
      .title2 {
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
      }
      .title3 {
        line-height: 48rpx !important;
      }
      .item {
        margin-top: 30rpx;
      }
    }
    .taskWrap {
      margin-top: 30rpx;
      width: 100%;
      height: 200rpx;
      background: rgba($color: #ff7900, $alpha: 0.05);
      border-radius: 20rpx;
      box-sizing: border-box;
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 28rpx 0;
      // 62rpx
      .line {
        position: absolute;
        top: 65rpx;
        left: 50%;
        transform: translateX(-50%);
        height: 2rpx;
        width: 470rpx;
        border-top: 2rpx dashed #ff7900;
      }
      .taskItem {
        z-index: 3;
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .wordWrap {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        image {
          width: 76rpx;
          height: 76rpx;
          flex-shrink: 0;
        }
        .word1 {
          font-size: 20rpx;
          color: #ff7900;
          line-height: 28rpx;
          white-space: nowrap; /* 设置不换行 */
        }
        .word2 {
          font-size: 20rpx;
          color: #666666;
          line-height: 28rpx;
          white-space: nowrap; /* 设置不换行 */
        }
      }
    }
    .teacherTitle {
      margin-bottom: 30rpx;
    }
    .teacherWrap {
      display: flex;
      .title2 {
        white-space: nowrap; /* 设置不换行 */
      }
      .remark {
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
      }
      .teacherTagWrap {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        .tag {
          margin-bottom: 20rpx;
          padding: 0 10rpx;
          height: 48rpx;
          background: #f5f5f5;
          border-radius: 10rpx;
          text-align: center;
          font-size: 24rpx;
          color: #333333;
          line-height: 48rpx;
          margin-left: 20rpx;
          white-space: nowrap; /* 设置不换行 */
        }
      }
    }
    .taskContent {
      margin-top: 30rpx;
      overflow: hidden;
      position: relative;
    }
    .shadow {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 140rpx;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 100%);
    }
    .expand {
      width: 100%;
      text-align: center;
      text {
        font-size: 24rpx;
        color: #ff7900;
        line-height: 34rpx;
        margin-right: 20rpx;
      }
      image {
        width: 20rpx;
        height: 20rpx;
      }
    }
    .phone {
      font-size: 28rpx;
      text-decoration: underline;
      color: #ff7900;
      line-height: 40rpx;
    }
    .company {
      display: flex;
      // height: 188rpx;
      background: #fafafa;
      border-radius: 20px;
      box-sizing: border-box;
      padding: 20rpx;
      image {
        flex-shrink: 0;
        width: 148rpx;
        height: 148rpx;
        border: 2rpx solid #eeeeee;
        border-radius: 20rpx;
        margin-right: 30rpx;
      }
      .companyInfo {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 30rpx;
          color: #2d2d2d;
          line-height: 42rpx;
          font-weight: bold;
        }
        .companyTagWrap {
          display: flex;
          flex-wrap: wrap;
          .compenyTag {
            height: 32rpx;
            background: rgba(255, 121, 0, 0.08);
            border-radius: 8rpx;
            padding: 0 20rpx;
            text-align: center;
            margin-right: 10rpx;
            font-size: 20rpx;
            color: #ff7900;
            line-height: 32rpx;
            margin-bottom: 10rpx;
          }
        }
        .info {
          font-size: 24rpx;
          color: #999999;
          line-height: 34rpx;
          text:nth-child(2) {
            margin: 0 30rpx;
          }
        }
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 120rpx;
  background: #ffffff;
  border-radius: 4px;
  padding-bottom: env(safe-area-inset-bottom);
  .confirm {
    margin: 20rpx auto;
    width: 630rpx;
    height: 90rpx;
    background: #ff7900;
    border-radius: 46rpx;
    line-height: 90rpx;
    text-align: center;

    font-size: 32rpx;
    color: #fff;
  }
}
</style>
